<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { initRouter } from "/@/router/utils";
import { addClass, removeClass } from "/@/utils/operate";
import bg from "/@/assets/login/bg.png";
import illustration0 from "/@/assets/login/illustration0.svg";
import illustration1 from "/@/assets/login/illustration1.svg";
import illustration2 from "/@/assets/login/illustration2.svg";
import illustration3 from "/@/assets/login/illustration3.svg";
import illustration4 from "/@/assets/login/illustration4.svg";
import illustration5 from "/@/assets/login/illustration5.svg";
import illustration6 from "/@/assets/login/illustration6.svg";
import { useUserStoreHook } from "/@/store/modules/user";
import { ElMessage } from "element-plus";

const router = useRouter();

// eslint-disable-next-line vue/return-in-computed-property
const currentWeek = computed(() => {
  switch (String(new Date().getDay())) {
    case "0":
      return illustration0;
    case "1":
      return illustration1;
    case "2":
      return illustration2;
    case "3":
      return illustration3;
    case "4":
      return illustration4;
    case "5":
      return illustration5;
    case "6":
      return illustration6;
    default:
      return illustration4;
  }
});
let user = ref("");
let pwd = ref("");
// let user = ref("951002007l78123233");
// let pwd = ref(
//   "-----BEGIN PRIVATE KEY-----\n" +
//     "MIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgSkSUAjleYYbCrsnb\n" +
//     "IndKSJCxN8nvkzasRWzCMVBStCOgCgYIKoZIzj0DAQehRANCAASvZvnG/I2mEPrb\n" +
//     "P4SuCDbkGzsAMKCIVWt7mkcbDrIKEfkGj7sHGQCGxlkmvW5/KBo0gQ0LrZhOVzjW\n" +
//     "3Yg8D0bc\n" +
//     "-----END PRIVATE KEY-----"
// );
// const title =
//   getCurrentInstance().appContext.config.globalProperties.$config?.Title;
const onLogin = async (): Promise<void> => {
  // storageSession.setItem("info", {
  //   username: "admin",
  //   accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
  // });
  let params = {
    username: user.value,
    password: pwd.value
  };
  useUserStoreHook()
    .loginByUsername(params)
    .then(data => {
      if (data.code === 0) {
        initRouter(data.data.role).then(() => {});
        router.push("/");
      } else {
        console.log("err");
        ElMessage.warning(data.msg);
      }
    })
    .catch(err => {
      console.log(err);
      ElMessage.warning(err || "登录失败");
    });
};

function onUserFocus() {
  addClass(document.querySelector(".user"), "focus");
}

function onUserBlur() {
  if (user.value.length === 0)
    removeClass(document.querySelector(".user"), "focus");
}

function onPwdFocus() {
  addClass(document.querySelector(".pwd"), "focus");
}

function onPwdBlur() {
  if (pwd.value.length === 0)
    removeClass(document.querySelector(".pwd"), "focus");
}
const toIndex = () => {
  router.push("/");
};

// const toRegister = () => {
//   router.push("/register");
// };
</script>

<template>
  <img :src="bg" class="wave" />
  <div class="login-container">
    <div class="img">
      <component :is="currentWeek"></component>
    </div>
    <div class="login-box">
      <div class="login-form">
        <!--        <avatar class="avatar" />-->
        <h2
          @click="toIndex"
          v-motion
          class="title"
          :initial="{
            opacity: 0,
            y: 100
          }"
          :enter="{
            opacity: 1,
            y: 0,
            transition: {
              delay: 100
            }
          }"
        >
          用户登录
        </h2>
        <div
          class="input-group user focus"
          v-motion
          :initial="{
            opacity: 0,
            y: 100
          }"
          :enter="{
            opacity: 1,
            y: 0,
            transition: {
              delay: 200
            }
          }"
        >
          <div class="icon">
            <i class="fa fa-user"></i>
          </div>
          <div>
            <h5>用户标识/邮箱</h5>
            <input
              type="text"
              class="input"
              v-model="user"
              @focus="onUserFocus"
              @blur="onUserBlur"
            />
          </div>
        </div>
        <div
          class="input-group pwd focus"
          v-motion
          :initial="{
            opacity: 0,
            y: 100
          }"
          :enter="{
            opacity: 1,
            y: 0,
            transition: {
              delay: 300
            }
          }"
        >
          <div class="icon">
            <i class="fa fa-lock"></i>
          </div>
          <div>
            <h5>私钥</h5>
            <textarea
              type="password"
              class="input"
              v-model="pwd"
              @focus="onPwdFocus"
              @blur="onPwdBlur"
            />
          </div>
        </div>
        <button
          class="btn"
          v-motion
          :initial="{
            opacity: 0,
            y: 10
          }"
          :enter="{
            opacity: 1,
            y: 0,
            transition: {
              delay: 400
            }
          }"
          @click="onLogin"
        >
          登录
        </button>
        <div
          v-motion
          :initial="{
            opacity: 0,
            y: 10
          }"
          :enter="{
            opacity: 1,
            y: 0,
            transition: {
              delay: 400
            }
          }"
        >
          <!--          <div>-->
          <!--            <span> 还没有账号？ </span>-->
          <!--            <span class="register-button">-->
          <!--              <el-link type="primary" @click="toRegister">点击注册</el-link>-->
          <!--            </span>-->
          <!--          </div>-->
        </div>
        <div
          v-motion
          :initial="{
            opacity: 0,
            y: 10
          }"
          :enter="{
            opacity: 1,
            y: 0,
            transition: {
              delay: 400
            }
          }"
          style="margin-top: 10px"
        >
          <div>
            <span class="register-button">
              <el-link type="primary" @click="toIndex"
                ><div style="color: #ccc">返回首页</div></el-link
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url("/@/style/login.css");

.title {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.register-button {
  a {
    display: inline-block;
  }
}
</style>
